<template>
  <div class="main">
    <div style="width: 100%">
      <div style="width: 100%">
        <el-row>
          <el-col :span="6">
            <el-statistic title="今日营业额" :value="todayTotalMoney" />
          </el-col>
          <el-col :span="6">
            <el-statistic :value="moneyTotal">
              <template #title>
                <div style="display: inline-flex; align-items: center">总营业额</div>
              </template>
            </el-statistic>
          </el-col>
          <el-col :span="6">
            <el-statistic title="今日订单数" :value="todayOrderCount" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="总订单数" :value="orderCount">
              <template #suffix>
                <el-icon style="vertical-align: -0.125em">
                  <ChatLineRound />
                </el-icon>
              </template>
            </el-statistic>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="12">
          <div ref="echarts1" class="echarts"></div>
        </el-col>
        <el-col :span="12">
          <div ref="echarts2" class="echarts"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";

export default {
  data() {
    return {
      echartsInstance1: null,
      echartsInstance2: null,
      todayTotalMoney: 0,
      moneyTotal: 0,
      todayOrderCount: 0,
      orderCount: 0,
    };
  },
  mounted() {
    this.getShowDate();

    // 初始化 echarts 实例1
    this.echartsInstance1 = echarts.init(this.$refs.echarts1);
    // 初始化 echarts 实例2
    this.echartsInstance2 = echarts.init(this.$refs.echarts2);
  },
  watch: {
    todayTotalMoney() {
      this.updateEcharts1();
    },
    moneyTotal() {
      this.updateEcharts1();
    },
    todayOrderCount() {
      this.updateEcharts2();
    },
    orderCount() {
      this.updateEcharts2();
    },
  },
  methods: {
    getShowDate() {
      const token = localStorage.getItem("shop_auth_token");
      axios
        .get("/api/shop/show", {
          headers: {
            token: token,
          },
        })
        .then((res) => {
          // console.log("获取到的数据:", res.data);
          if (res.data.success) {
            const msg = res.data.message;
            this.moneyTotal = msg.moneyTotal;
            this.orderCount = msg.orderCount;
            this.todayOrderCount = msg.todayOrderCount;
            this.todayTotalMoney = msg.todayTotalMoney; // Update today's total money here
          }
        })
        .catch((err) => {
          console.error("获取数据时出错:", err);
        });
    },
    updateEcharts1() {
      const option = {
        // 使用内置的 vintage 主题
        theme: "vintage",
        // 配置饼图的数据
        series: [
          {
            name: "营业额",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.todayTotalMoney, name: "今日营业额" },
              { value: this.moneyTotal, name: "总营业额" },
            ],
            label: {
              show: true,
              formatter: "{b}: {c}元",
              textStyle: {
                fontSize: 12,
              },
            },
            // 饼图样式配置
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.echartsInstance1.setOption(option);
    },
    updateEcharts2() {
      const option = {
        // 使用内置的 vintage 主题
        theme: "vintage",
        // 配置 x 轴和 y 轴
        xAxis: {
          type: "category",
          data: ["今日订单数", "总订单数"],
          axisLabel: {
            // 设置 x 轴标签文字样式
            textStyle: {
              color: "#333",
              fontSize: 12,
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            // 设置 y 轴标签文字样式
            textStyle: {
              color: "#333",
              fontSize: 12,
            },
          },
          // 调整坐标轴刻度线样式
          axisLine: {
            lineStyle: {
              color: "#999",
              width: 1,
            },
          },
          // 调整坐标轴分隔线样式
          splitLine: {
            lineStyle: {
              color: "#eee",
              type: "dashed",
            },
          },
        },
        // 配置系列的样式
        series: [
          {
            name: "数据",
            type: "bar",
            data: [this.todayOrderCount, this.orderCount],
            // 设置柱状图的颜色
            itemStyle: {
              color: "#6ab0ff",
            },
            // 配置标签的样式
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#333",
                fontSize: 12,
              },
            },
            // 添加动画效果
            animation: true,
          },
        ],
      };
      this.echartsInstance2.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.main {
  height: 100%;
  width: 100%;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .el-col {
    text-align: center;
  }
  .echarts {
    height: 500px;
    width: 100%;
  }
}
</style>
